<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  { id: 1, name: '西瓜', price: 4, num: 3 },
  { id: 2, name: '苹果', price: 6, num: 6 },
  { id: 3, name: '雪梨', price: 5, num: 3 }
])
// 修改某个商品的数据
const setNum = (id: number) => {
  const findItem = list.value.find(item => item.id === id)
  // 可选链操作符
  // 如果findItem===unll || findItem===undefined 返回值就是undefined
  // 如果findItem是不是null也不是undefined 就返回findItem.num
  console.log(findItem?.num)
  // if (findItem) {
  //   console.log(findItem.num)
  // }
}
// vue-cli脚手架内可选链操作符不能用于html只能用于js  vite脚手架是没问题的
// 可选链操作符只是用于获取值不能用于设置值

const obj = ref<{
  userInfo?: {
    name: string
  }
}>({})

const getUserInfo = () => {
  obj.value.userInfo = {
    name: '张三'
  }
}
</script>

<template>
  <div class="main"></div>
  <button @click="setNum(1)">能找到:点击查找</button>
  <button @click="setNum(999)">不能找到:点击查找</button>
  <hr />
  <h2>{{ obj.userInfo?.name }}</h2>
  <button @click="getUserInfo">模拟 接口请求</button>
</template>

<style></style>
